<!-- 评论区组件 comment-section.vue -->
<template>
  <view class="comment-container">
    <!-- 评论标题 -->
    <view class="comment-header">
      <text class="title">用户评论（{{ commentList.length }}）</text>
    </view>

    <!-- 评论列表 -->
    <view class="comment-list">
      <view v-for="item in commentList" :key="item.id" class="comment-item">
        <!-- 用户信息 -->
        <view class="user-info">
          <image
            class="avatar"
            :src="
              item.avatar ||
              'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp'
            "
            mode="aspectFill"
          />
          <view class="info">
            <text class="nickname">{{ item.OfficerName }}</text>
            <text class="time">{{ item.CreateTime }}</text>
          </view>
        </view>

        <!-- 评论内容 -->
        <text class="content">{{ item.Content }}</text>
      </view>
    </view>

    <!-- 输入框 -->
    <view class="input-box">
      <input
        class="input"
        v-model="commentContent"
        placeholder="写下你的评论..."
        placeholder-class="placeholder"
        :focus="isFocus"
        @focus="handleFocus"
        @blur="handleBlur"
      />
      <div class="w-100rpx h-72rpx">
        <u-button
          type="primary"
          size="mini"
          shape="circle"
          :disabled="!commentContent.trim()"
          :customStyle="{
            height: '100%'
          }"
          @click="submitComment"
        >
          发送
        </u-button>
      </div>
    </view>
  </view>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { getCaseCommentApi, postCaseCommentApi } from './service'
import dayjs from 'dayjs'
import { userStore } from '@/store/modules/user'

@Component
export default class CommentSection extends Vue {
  @Prop({ type: String }) CaseID!: String

  @Watch('CaseID')
  async onCaseIDChange(newValue: string) {
    console.log(' ', newValue)
    await this.getComment()
  }

  get userInfo(): any {
    return userStore.userInfo || {}
  }
  // 评论列表
  commentList: any = []

  // 输入内容
  commentContent = ''
  isFocus = false

  // 提交评论
  async submitComment() {
    if (!this.commentContent.trim()) return

    const newComment = {
      OfficerID: this.userInfo.OfficerID,
      OfficerName: this.userInfo.Name,
      CaseID: this.CaseID,
      Content: this.commentContent
    }

    this.commentContent = ''
    this.isFocus = false

    try {
      await postCaseCommentApi(newComment)
      await this.getComment()
    } catch (error) {
      console.error(error)
    }
  }

  handleFocus() {
    this.isFocus = true
  }

  handleBlur() {
    this.isFocus = false
  }
  async getComment() {
    try {
      const { data } = await getCaseCommentApi({
        CaseID: this.CaseID
      })
      this.commentList = data.map((item: any) => {
        return {
          ...item,
          CreateTime: dayjs(item.CreateTime).format('YYYY-MM-DD HH:mm:ss')
        }
      })
    } catch (error) {
      console.error('获取评论失败:', error)
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-container {
  padding: 30rpx;
  background-color: #fff;
}

.comment-header {
  margin-bottom: 30rpx;
  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
  }
}

.comment-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .info {
      display: flex;
      flex-direction: column;
    }

    .nickname {
      font-size: 28rpx;
      color: #666;
    }

    .time {
      font-size: 24rpx;
      color: #999;
    }
  }

  .content {
    font-size: 30rpx;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20rpx;
  }

  .action-bar {
    display: flex;
    justify-content: flex-end;

    .like {
      display: flex;
      align-items: center;
      .count {
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.input-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #eee;

  .input {
    flex: 1;
    height: 72rpx;
    padding: 0 20rpx;
    margin-right: 20rpx;
    background: #f5f5f5;
    border-radius: 36rpx;
    font-size: 28rpx;
  }

  .placeholder {
    color: #999;
  }
}
</style>
